<template>
<el-row>
    <el-row class="content-top" type="flex" justify="center">
      <el-col :span="14">
        <el-row  class="date">
          {{getDate}}
        </el-row>


        <el-row>
          <span>{{lists[no].title}}</span>
          <span class="weather-feel-icon">(<i :class="weather"></i> {{lists[no].feel}})</span>
        </el-row>
      </el-col>  


      <el-col :span="4" class="icon-area">
        <el-button icon="el-icon-back" circle @click="back()"></el-button>
        <el-button class="el-icon-edit" circle @click="revise()"></el-button>
        <el-button type="info" icon="el-icon-delete" circle @click="remove()"></el-button>
      </el-col>
    </el-row>
    

    <el-row>
      <el-row justify="center" type="flex">
        <el-col :span="18">
          <el-divider></el-divider>
        </el-col>
      </el-row>
        
      <el-row justify="center" type="flex" class="content"> 
        <el-col :span="17">
          {{lists[no].content}}
        </el-col>
      </el-row>
      
    </el-row>

  </el-row>
</template>

<script>
import constant from '../constant';

export default {
  name: "ListByNo",
  data() {
    return {
      lists: this.$store.state.list,
    };
  },
  computed:{
    getDate(){
      let dateDay;
      let yearMonthDay = `${this.lists[this.no].date.getFullYear()}年
                          ${this.lists[this.no].date.getMonth()+1}月
                          ${this.lists[this.no].date.getDate()}日`;
      let hours = this.lists[this.no].date.getHours();
      let minutes = this.lists[this.no].date.getMinutes();
      
      if(minutes < 10) {minutes = `0${minutes}`;}
      
      if(hours > 12){
        hours = hours-12;
        if(hours < 10) {hours = `0${hours}`;}
        dateDay = `${yearMonthDay} 下午 ${hours}时 ${minutes}分`;
      }
      else{
        if(hours < 10) {hours = `0${hours}`;}
        dateDay = `${yearMonthDay} 上午 ${hours}时 ${minutes}分`;
      }
      return dateDay;
    },
    weather(){
      return ('el-icon-'+this.lists[this.no].weather);
    }
  },
  props:['no'],
  methods: {
    back(){
      let router = this.$router;
      router.push('/diary');
    },
    revise(){
      let router = this.$router;
      router.push(`/diary/write/${this.no}`);
    },
    remove() {
      this.$store.commit(constant.DELETE_DIARY, {index: this.no});
      let router = this.$router;
      router.push('/diary');
      this.$message({
        type:'info',
        message: '日记已被删除'
      });
    }
  }
}
</script>

<style scoped>
  .content-top{
    margin-top:2%;
    padding:0 40px 0 40px;
  }
  .date, .weather-feel-icon{
    color: gray;
  }
  .icon-area{
    text-align: right;
  }
  .el-icon-edit{
    background-color: #97adf0;
    color: white;
  }
  .content{
    height: 500px;
    overflow-y: auto;
    overflow-x: auto;
    width: 100%;
  }
</style>
